﻿@using cmdb.keede.common
@using cmdb.keede.com

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_rootLayout.cshtml";
}

<div id="topoPanel" class="clearfix">
    <div class="topoLeft">
        <div class="topoleft-tree box">
            <ul id="ztree" class="ztree"></ul>
        </div>
        <div class="topoleft-icon">
            <span class="glyphicon glyphicon-menu-left"></span>
        </div>
    </div>
    <div class="topoRight">
        <div>
            <div class="topoRight-header">
                <h4 class="box-title">查询条件</h4>
                <div>
                    <span class="fa fa-angle-up" id="showSearch" aria-hidden="true"></span>
                </div>
            </div>
            <div id="topoRight-search">
                <div class="topoRight-condition">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-addon">内网IP</span>
                            <input type="text" class="form-control" id="search-innerIP" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-addon">外网IP</span>
                            <input type="text" class="form-control" id="search-outerIP" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-addon">操作系统</span>
                            @Html.DropDownList("search-os", Html.GetEnumSelectList<EnumOperationSystem>(), "——Select——", new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-addon">机器状态</span>
                            @Html.DropDownList("search-status", Html.GetEnumDescriptionSelectList<EnumVirtualHostStatus>(), "——Select——", new { @class = "form-control" })
                        </div>
                    </div>
                    <div class=" col-xs-12 text-center">
                        <input type="button" id="search-clear" class=" btn btn-default" value="重置" />
                        <input type="button" id="search-submit" class=" btn btn-google" value="查询" />
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top:6px;">
            <div class="topoRight-header">
                <h4 class="box-title">查询结果</h4>
                <div>
                </div>
            </div>
            <div class="topoRight-option">
                <span class="btn btn-adn">操作1</span>
                <span class="btn btn-flickr">操作2</span>
            </div>
            <div class="topoRight-data">
                <table id="table" class="table table-bordered table-hover">
                    <thead id="thead">
                        <tr>
                            <th style="width: 36px; text-align: center;"><input type="checkbox" id="check-all" /></th>
                            <th class="col-ins-name"><label for="Id">Id</label></th>
                            <th class="col-ins-name"><label for="AssetId">资产编号</label></th>
                            <th class="col-ins-name"><label for="DeviceType">设备类型</label></th>
                            <th class="col-ins-name"><label for="OS">操作系统</label></th>
                            <th class="col-ins-name"><label for="InnerIP">内网IP</label></th>
                            <th class="col-ins-name;"><label for="CPU">CPU(核)</label></th>
                            <th class="col-ins-name;"><label for="HardDiskSize">硬盘容量（GB）</label></th>
                            <th class="col-ins-name;"><label for="RAM">内存（GB）</label></th>
                            <th class="col-ins-name;"><label for="Maintainers">维护人</label></th>
                            <th class="col-ins-name;"><label for="Status">状态</label></th>
                            <th class="col-ins-name;"><label for="CreateTime">创建时间</label></th>
                        </tr>
                    </thead>
                    <tbody id="tbody"></tbody>
                </table>
                <div class="pull-right">
                    <div id="nav"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="txtSearchAppId" />

@await Html.PartialAsync("_pagingLayout")

<script type="text/template" id="listTemplate">
    <% _.each(obj,function(item) {%>
    <tr data-id="<%=item.id%>">
        <td>
            <input type="checkbox" data-id="<%=item.id%>" />
        </td>
        <td>
            <%=item.id%>
        </td>
        <td>
            <%=item.assetId%>
        </td>
        <td>
            <%=item.deviceTypeName%>
        </td>
        <td>
            <%=item.osName%>
        </td>
        <td>
            <%=item.innerIP%>
        </td>
        <td>
            <%=item.cpu%>
        </td>
        <td>
            <%=item.hardDiskSize%>
        </td>
        <td>
            <%=item.ram%>
        </td>
        <td>
            <%=item.maintainers%>
        </td>
        <td>
            <%=item.statusName%>
        </td>
        <td>
            <%=item.createTime%>
        </td>
    </tr>
    <% });%>
</script>

<environment include="Development">
    <link href="~/css/BusinessTopology/index.css" rel="stylesheet" />
    <link href="~/lib/zTree/css/metroStyle/metroStyle.css" rel="stylesheet" />
    <script src="~/lib/underscore/underscore.js"></script>
    <script src="~/lib/zTree/js/jquery.ztree.core.js"></script>
    <script src="~/js/BusinessTopology/index.js"></script>
</environment>

<environment exclude="Development">
    <link href="~/css/BusinessTopology/index.min.css" rel="stylesheet" />
    <link href="~/lib/zTree/css/metroStyle/metroStyle.css" rel="stylesheet" />
    <script src="~/lib/underscore/underscore-min.js"></script>
    <script src="~/lib/zTree/js/jquery.ztree.core.js"></script>
    <script src="~/js/BusinessTopology/index.min.js"></script>
</environment>

<div class="modal fade in" id="details" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content" style="width:800px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title"><label id="crtHeader">虚拟机详情</label></h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="box-body">
                        <div class="col-lg-6">
                            <label>Id:</label>
                            <span id="d-id"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>资产编号：</label>
                            <span id="d-assetId"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>区域：</label>
                            <span id="d-area"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>设备类型：</label>
                            <span id="d-deviceType"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>操作系统：</label>
                            <span id="d-os"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>系统版本：</label>
                            <span id="d-osVersion"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>管理员：</label>
                            <span id="d-adminName"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>密码：</label>
                            <span id="d-password"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>内网IP：</label>
                            <span id="d-innerIP"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>外网IP：</label>
                            <span id="d-outerIP"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>CPU：</label>
                            <span id="d-cpu"></span>
                        </div>

                        <div class="col-lg-6">
                            <label>磁盘容量：</label>
                            <span id="d-hardDiskSize"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>内容容量：</label>
                            <span id="d-ram"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>维护人：</label>
                            <span id="d-maintainers"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>状态：</label>
                            <span id="d-status"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>创建时间：</label>
                            <span id="d-createTime"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>过期时间：</label>
                            <span id="d-expiredTime"></span>
                        </div>
                        <div class="col-lg-6">
                            <label>备注：</label>
                            <span id="d-remark"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
